<template>
<div>
    <Nut  style="height: 100px"/>
    <Chart :option="chartOption" style="height: 300px" />
</div>

</template>

<script>
import axios from "axios";
// import request from "../../utils/request";
import Nut from "../../components/doughnutChart";
import Chart from "../../components/Chart";
export default {
    data() {
        return {
            chartOption: {}
        }
    },
    components: {
        Chart,
        Nut
    },
    mounted() {
        this.getChartData();
        // this.interval = setInterval(() => {
        //     this.getChartData();
        // }, 3000);
    },
    methods: {
        getChartData() {
            // request({
            //     url: "/api/dashboard/chart",
            //     method: "get",
            //     params: { ID: 12345}
            // })
            axios
              .get('/api/dashboard/chart', { params:{ ID: 12345 }})
              .then(response => {
                this.chartOption = {
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: response.data
                    }]
                }
            })
        }
    },
    beforeDestroy() {
        // clearInterval(this.interval);
    }
}
</script>
